<template>
    <div style="height:100%;">
        <div style="display:inline-block; width:50%; height:100%; vertical-align: top;">
            <ChartWrapper :option="option" />
        </div>
        <div style="display:inline-block; width:50%; height:100%; vertical-align: top">
            <div class="flex-wrapper">
                <div v-for="(item, index) in valueArr" class="flex-item">
                    <div class="icon"><img :src="iconMaps[index]" /></div>
                    <div>
                        <div style="margin-bottom:">{{  item.name }}</div>
                        <div>
                            <span class="value" :style="{ color:item.itemStyle.color }">{{ item.value }}</span>
                            <span class="unit" style="margin-right:var(--lPadding);">件</span>
                            <span class="unit">{{ total ? (item.value / total * 100).toFixed(1) + '%' : '--' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>      
    import { watch, reactive, ref, onMounted } from 'vue';
    import ChartWrapper from '@/components/ChartWrapper.vue';
    import { getCorrectionAnalysis } from '@/api/board.js';
    import Icon1 from '@/assets/monitor/fix.png';
    import Icon2 from '@/assets/monitor/finished.png';
    import Icon3 from '@/assets/monitor/unfinished.png';

    const iconMaps = { 0:Icon1, 1:Icon2, 2:Icon3 };
    const option = ref({});
    const valueArr = ref([]);
    let total = 0;
    onMounted(()=>{
        getCorrectionAnalysis()
        .then(res=>{
            if ( res.data.code === 200 ) {
                const statusMaps = { 1:{ text:'待处理', color:'#e7b361' }, 2:{ text:'不需要整改', color:'#33e596' }, 3:{ text:'已完成', color:'#33e596' }, 5:{ text:'已转工单', color:'#21daff' }}	
                const statusList = [1, 3, 5];
                let data = res.data.data || [];
                let arr = [];
                statusList.forEach(status=>{
                    let obj = data.filter(i=>i.rectifyStatus === status)[0];
                    if ( obj ) {
                        total += obj.rectifyCount;
                        arr.push({ name:( statusMaps[status] || {} ).text, value:obj.rectifyCount, itemStyle:{ color: (statusMaps[status] || {}).color } })
                    } else {
                        arr.push({ name:( statusMaps[status] || {} ).text, value:0, itemStyle:{ color: (statusMaps[status] || {}).color } })
                    }
                })
                valueArr.value = arr;
                option.value = {
                    tooltip:{
                        show:false
                    },
                    series:[{
                        type:'pie',
                        name:'本月缺陷处理情况',
                        radius:['60%', '72%'],
                        center:['50%','50%'],
                        // avoidLabelOverlap: false,
                        // roseType: 'radius',
                        label:{
                            show:false,
                        },
                        labelLine: {
                            show:false
                        },
                        itemStyle: {
                            borderColor:'#021618',
                            borderWidth:4,
                            // shadowBlur: 200,
                            // shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        },
                        data: arr
                    }]
                }
            }
        })
    })
</script>
<style lang="scss" scoped>
    .flex-wrapper {
        display:flex;
        flex-direction: column;
        justify-content: center;
        width:100%;
        height:100%;
        .flex-item {
            display:flex;
            align-items: center;
            color:#fff;
            font-size:var(--baseFontSize);
            margin:var(--mPadding) 0;
            .icon {
                margin-right:var(--mPadding);
                img {
                    width:1.8vw;
                }
            }
            .value {
                font-size:var(--18FontSize);
                line-height:var(--24FontSize);
                margin-right:var(--sPadding);
            }
            .unit {
                color:rgba(255, 255, 255, 0.8);
            }
        }
    }
</style>